<template>
	<view>
		<view class="box">
			<view class="box_config">
				<view style="background-color: #fff;">
					<u-tabs :list="tabList" keyName="manufacturer" :scrollable="false" @click="onChange"></u-tabs>
				</view>
				<!-- 搜索框 -->
				<view class="box_switch">
					<u-search shape="square" placeholder="搜索" v-model="inputValue" clearabled :show-action="false"
						@search="clearList" @clickIcon="clearList" bgColor="#fff">
					</u-search>
					<view class="yjgd" @click="yjgd">一键关灯</view>
				</view>
			</view>
			<!-- 列表 -->

			<view class="box_list">
				<view class="box_list_item" v-for="item,index in list" :key="index">
					<view class="fk"></view>
					<view v-if="item.associatedField&&item.associatedPlace" class="cqname">
						场区场地：{{ item.associatedField }}-{{ item.associatedPlace }}</view>
					<view v-else class="cqname">场地：{{ item.addres }}</view>
					<view>
						<view class="left">
							<view>设备线路：{{ item.title }}</view>
							<view>设备名称：{{ item.aliasName }}</view>
							<view>设备编号：{{ item.lightId }}</view>
						</view>
						<view class="right flex-c">
							<view :class="item.oc=='true'?'switch_checked':''" @click="change(item)">
								<view></view>
								<!-- <text>常关</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore v-if="!is && list.length >= 5" status="nomore" line />
			<view class="no-list" v-if="!list || list.length == 0">
				<image src="@/static/images/default_empty.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
				page: 0, //页码
				is: true, //控制是否还能切换下一页
				list: [],
				idIndex: 1,
				tabList: [],
				active: 0
			};
		},
		onLoad() {
			this.tomanufacturerList();
		},
		methods: {
			tomanufacturerList() {
				this.$app.ajax({
						data: {
							param: {
								type: '5'
							}
						},
						api: this.$api.manufacturerList()
					}).then(res => {
						this.tabList = res.recordList;
						this.active = 0;
						this.getList();
					})
					.catch(err => {
						console.log(err);
					});
			},
			onChange(e) {
				this.active = e.index
				this.clearList()
			},
			change(b) {
				let venueId = uni.getStorageSync('GYMID');
				this.$app.ajax({
						data: {
							param: {
								facturerId: this.tabList[this.active].id,
								lineId: b.id,
								status: b.oc == 'true' ? '1' : '0',
								venueId
							}
						},
						api: this.$api.controlLine()
					}).then(res => {
						if (res.errorCode === '000000') {
							uni.showToast({
								title: '修改成功',
								icon: 'none',
								duration: 2000
							});
							this.clearList();
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			yjgd() {
				const venueId = uni.getStorageSync('GYMID');
				this.$app.ajax({
					data: {
						param: {
							facturerId: this.tabList[this.active].id,
							venueId
						}
					},
					api: this.$api.closeLight()
				}).then(res => {
					if (res.errorCode === '000000') {
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 2000
						});
						this.clearList();
					}
				});
			},

			// 列表
			getList() {
				if (!this.is) return
				this.page = this.page + 1;
				this.$app.ajax({
					data: {
						pagination: {
							page: this.page,
							rows: 10
						},
						param: {
							venueId: uni.getStorageSync('GYMID'),
							userId: uni.getStorageSync('userId'),
							facturerId: this.tabList[this.active].id,
							mac: this.inputValue
						}
					},
					api: this.$api.lightList()
				}).then(res => {
					if (res.errorCode != '000000') return;
					if (res.recordList.length < 10 || !res.recordList) {
						this.is = false;
					}
					let arr = res.recordList;
					let arrs = [];
					if (arr) {
						arrs = this.list.concat(arr);
					} else {
						arrs = [];
					}
					this.list = arrs;
					this.totalCount = res.totalCount
				});
			},
			clearList() {
				this.is = true
				this.page = 0
				this.list = []
				this.getList();
			},
			onReachBottom() {
				this.getList();
			},
		}
	};
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.box_config {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.box_switch {
		box-sizing: border-box;
		width: 690rpx;
		margin: 24rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.box_list {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.box_list_item {
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		background: #ffffff;
		border-radius: 8rpx;
		position: relative;
	}

	.cqname {
		color: #222222;
		font-size: 30rpx;
		line-height: 1.5;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bolder;
		padding-bottom: 10rpx;
		margin-bottom: 10rpx;
	}

	.fk {
		width: 10rpx;
		position: absolute;
		top: 39rpx;
		left: 0rpx;
		height: 28rpx;
		background: #4167c1;
		display: inline-block;
	}

	.left view {
		color: #666666;
		font-size: 26rpx;
		line-height: 1.5;
	}

	.left view:first-of-type {
		margin-bottom: 10rpx;
	}

	.right {
		justify-content: flex-end;
	}

	/* .right text{
  font-size: 26rpx;
  margin-left: 20rpx;
}
.right text:first-of-type{
  margin-left: 0;
} */
	.switch {
		background: #b2b2b2;
		width: 100rpx;
		height: 50rpx;
		margin-left: 30rpx;
		box-sizing: content-box;
		border-radius: 25rpx;
		border: 1px solid #b2b2b2;
		position: relative;
	}

	.switch view {
		position: absolute;
		top: 0;
		left: 0;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.4);
		transition: all 0.35s cubic-bezier(0.45, 1, 0.4, 1);
	}

	.switch_checked::before {
		transform: scale(0);
	}

	.switch_checked {
		background-color: #4167c1;
		border: 1px solid #4167c1;
	}

	.switch_checked view {
		left: 100%;
		transform: translateX(-100%);
	}

	.switch text {
		color: #fff;
		width: 120rpx;
		top: 0;
		left: 0;
		position: absolute;
		text-align: right;
		line-height: 50rpx;
		font-size: 24rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
	}

	.switch_checked text {
		text-align: left;
		padding-left: 10rpx;
	}

	.huifu {
		border: 1px solid #4167c1;
		width: 120rpx;
		line-height: 50rpx;
		margin-left: 20rpx;
		height: 50rpx;
		text-align: center;
		box-sizing: content-box;
		border-radius: 25rpx;
		color: #4167c1;
	}

	.yjgd {
		margin-left: 30rpx;
		width: 120rpx;
		float: none;
		text-align: right;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4167c1;
	}
</style>